<template>
  <div id="home" class="wrapper">
    <smart-bar class="home-nav"><div slot="center">购物车</div></smart-bar>
    <tab-control
        ref="taba"
        :titles="['流行' , '新款', '精品']"
        v-show="istableFixed"
        class="fixAbled"
        @indexEvent='indexEvent'></tab-control>
    <scroll
      ref="scroll"
      class="contents"
      :Types="3"
      :Loads="true"
      @scrollClick="scrollClick"
      @pullingUp="pullingUp"
      >
      <home-cart
      @swiperImageLoad = 'swiperImageLoad'
      :banners="banners"></home-cart>
      <cart-recommend :recommend="recommend"></cart-recommend>
      <cart-popular></cart-popular>
      <tab-control
        ref="tabb"
        :titles="['流行' , '新款', '精品']"
        @indexEvent='indexEvent'></tab-control>
      <goods-list
        :goods="goods[currentType].list"></goods-list>
    </scroll>
    <bottom-lable
    v-show="isShow"
    @click.native="lableClick"></bottom-lable>
  </div>
</template>

<script>
import SmartBar from '../comment/SmartBar.vue'
import Scroll from '../comment/Scroll.vue'
import BottomLable from '../comment/BottomLable.vue'

import HomeCart from '../alls/HomeCart.vue'
import CartRecommend from '../alls/CartRecommend.vue'
import CartPopular from '../alls/CartPopular.vue'

import TabControl from '../content/TabControl.vue'
import GoodsList from '../content/GoodsList.vue'


import {getHomeMultidata,getHomeGoods} from '../NetWork/Cart'
import {debounce} from '../NetWork/fangdou'
export default {
  name: 'cart',
  components:{
    SmartBar,
    HomeCart,
    CartRecommend,
    CartPopular,
    TabControl,
    GoodsList,
    Scroll,
    BottomLable
  },
  data () {
    return {
      banners: [],
      recommend: [],
      goods: {
        'pop': { page:0, list:[] },
        'new': { page:0, list:[] },
        'sell': { page:0, list:[] }
      },
      currentType : 'pop',
      isShow: false,
      tabOffsetTop: 0,
      istableFixed: false
    }
  },
  created () {
    // 请求多个数据
    this.getHomeMultidata()
  //请求商品数据
    this.getHomeGoods('pop')
    this.getHomeGoods('new')
    this.getHomeGoods('sell')
  },
  mounted () {
    // 防抖处理包装
    const refresh =debounce(this.$refs.scroll.refresh)
    // 监听item中图片加载完成
    this.$bus.$on('itemImageLoad', () => {
      refresh()
    })
  },
  methods: {
    getHomeMultidata () {
       getHomeMultidata().then(res => {
      this.banners = res.data.banner.list
      this.recommend = res.data.recommend.list
      console.log(res)
    })
    },
    getHomeGoods (type) {
      const page = this.goods[type].page + 1
      getHomeGoods(type, page).then(res => {
      this.goods[type].list.push(...res.data.list)
      this.goods[type].page += 1
      this.$refs.scroll.finishPullUp()
      console.log(res)
    })
    },
    indexEvent (index) {
      switch (index) {
        case 0 :
        this.currentType= 'pop'
        break
        case 1 :
        this.currentType= 'new'
        break
        case 2 :
        this.currentType= 'sell'
        break
      }
      this.$refs.taba.currenindex = index
      this.$refs.tabb.currenindex = index
    },
    scrollClick (option) {
      this.isShow = (-option.y) >1000
      //决定是否吸盘
      this.istableFixed = (-option.y) >this.tabOffsetTop
    },
    pullingUp () {
      this.getHomeGoods(this.currentType)
    },
    swiperImageLoad () {
      this.tabOffsetTop = this.$refs.tabb.$el.offsetTop
    },
    lableClick () {
      this.$refs.scroll.scrollTo(0, 0)
    }
  }
}
</script>

<style scoped>
#home {
  position: relative;
  height: 100vh;
}
.home-nav {
  background-color: var(--color-tint);
  color: #fff;
  /* position: fixed;
  right: 0;
  left: 0;
  top: 0;
  z-index: 9; */
}
.fixAbled {
  position: relative;
  z-index: 9;
}
.contents {
  overflow: hidden;
  position: absolute;
  top: 44px;
  bottom: 49px;
  left: 0;
  right: 0;
}
</style>>
